<template>
    <svg
        :class="getClassName"
        :width="width"
        :height="height"
        aria-hidden="true"
    >
        <use :xlink:href="getName"></use>
    </svg>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";

@Component({
    name: "icon-svg"
})
export default class IconSvg extends Vue {
    @Prop({
        type: String,
        required: true
    }) readonly name!: string;

    @Prop({
        type: String,
        default: ""
    }) readonly className!: string;

    @Prop({
        type: String,
        default: null
    }) readonly width!: string;

    @Prop({
        type: String,
        default: null
    }) readonly height!: string;

    get getName() {
        return `#${this.name}`;
    }

    get getClassName() {
        return [
            "icon-svg",
            `icon-svg__${this.name}`,
            this.className && /\S/.test(this.className)
                ? `${this.className}`
                : ""
        ];
    }
}
</script>

<style lang="scss">
.icon-svg {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    color: currentColor;
    overflow: hidden;
}
</style>
